<template>
	<div class="deal">
		<div class="swiper-box">
			<Carousel autoplay>
				<Carousel-item>
					<div class="demo-carousel"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2239615931,1359896969&fm=26&gp=0.jpg" /></div>
				</Carousel-item>
				<Carousel-item>
					<div class="demo-carousel"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2239615931,1359896969&fm=26&gp=0.jpg" /></div>
				</Carousel-item>
				<Carousel-item>
					<div class="demo-carousel"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=270159103,3981015868&fm=26&gp=0.jpg" /></div>
				</Carousel-item>
				<Carousel-item>
					<div class="demo-carousel"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4272169083,4195110777&fm=26&gp=0.jpg" /></div>
				</Carousel-item>
			</Carousel>
		</div>
		<div class="black">
			<div class="black-main">
				<div v-on:click="back"><Icon type="ios-arrow-back" style="font-size: 25px; color: white;" /></div>
				<div><Icon type="ios-heart-outline" style="font-size: 25px; color: white;" /></div>
				<div><Icon type="ios-share-outline" style="font-size: 25px; color: white;" /></div>
			</div>
		</div>
		<div class="details-box">
			<div class="details-biaoqian">
				<div>满两年</div>
				<div>随时可看</div>
				<div>南北通透</div>
			</div>
			<div class="details-title">此房飞机户型三开间朝南 河景房 视野开阔采光好</div>
			<div class="details-money">
				<div class="details-money-box">
					<div>110万</div>
					<div>售价</div>
				</div>
				<div class="details-money-box">
					<div>3室2厅</div>
					<div>房型</div>
				</div>
				<div class="details-money-box">
					<div>98.55m²</div>
					<div>面积</div>
				</div>
			</div>
			<div class="details-xiangqing-box">
				<div class="details-xiangqing">
					<label>单价：</label>
					11162元/平
				</div>
				<div class="details-xiangqing">
					<label>挂牌：</label>
					2019.03.27
				</div>
				<div class="details-xiangqing">
					<label>朝向：</label>
					南
				</div>
				<div class="details-xiangqing">
					<label>楼层：</label>
					低楼层（共34层）
				</div>
				<div class="details-xiangqing">
					<label>楼型：</label>
					板楼
				</div>
				<div class="details-xiangqing">
					<label>电梯：</label>
					有
				</div>
				<div class="details-xiangqing">
					<label>装修：</label>
					毛坯
				</div>
				<div class="details-xiangqing">
					<label>年代：</label>
					2016年建成
				</div>
				<div class="details-xiangqing">
					<label>用途：</label>
					普通住宅
				</div>
				<div class="details-xiangqing">
					<label>权属：</label>
					商品房
				</div>
				<div class="details-xiangqing1">
					<label>小区：</label>
					中海·何郡山（安宁区莫高大道）
					<label class="right"><img src="../../../static/img/details/right.png" /></label>
				</div>
			</div>
			<div class="fangyuanjieshao-box">
				<div class="fangyuanjieshao-title">房源介绍</div>
				<Tabs active-key="key1" size="small">
					<Tab-pane label="核心卖点" key="key1"><div class="hxmd-cont">此房飞机户型三开间朝南，河景房 视野开阔 采光好 ，房东诚心出售</div></Tab-pane>
					<Tab-pane label="小区介绍" key="key2"><div class="hxmd-cont">此房子是精装修的房子，里面的装修材料都是品牌家具，直接可以拎包入住。</div></Tab-pane>
					<Tab-pane label="周边配套" key="key3"><div class="hxmd-cont">小区里面就自带超市，门口饭馆也很多，离东部市场近。平时买东西也比较方便。</div></Tab-pane>
					<Tab-pane label="适宜人群" key="key4"><div class="hxmd-cont">正门出来就是段家滩路，公交站就在小区门口，22路、147路、138路、75路、110路。</div></Tab-pane>
				</Tabs>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'detail',
	data() {
		return {
			index: 0
		};
	},
	methods: {
		back() {
			this.$router.go(-1); //返回上一层
		},
		tiaozhuan() {
			this.$router.go(-1);
		}
	}
};
</script>

<style>

.black {
	width: 100%;
	height: 0.43rem;
	position: fixed;
	left: 50%;
	top: 5%;
	transform: translate(-50%, -50%);
}
.black-main {
	width: 6.93rem;
	height: 100%;
	margin: auto;
	display: flex;
	line-height: 0.43rem;
}
.black-main > div:nth-of-type(2) {
	margin-left: 5rem;
}
.black-main > div:nth-of-type(3) {
	margin-left: 0.5rem;
}
.swiper-box {
	width: 100%;
	height: 4.5rem;
}
.swiper-box img {
	width: 100%;
	height: 4.5rem;
}
.details-box {
	width: 100%;
	height: auto;
	padding: 0.35rem 0.3rem;
	box-sizing: border-box;
}
.details-biaoqian {
	width: 100%;
	height: 0.35rem;
	display: flex;
}
.details-biaoqian div {
	width: auto;
	height: 100%;
	padding: 0 0.07rem;
	box-sizing: border-box;
	background: #e1f4f8;
	color: #51c0cc;
	margin-right: 0.1rem;
	font-size: 0.2rem;
	line-height: 0.35rem;
}
.details-title {
	width: 100%;
	height: 1.15rem;
	font-size: 0.42rem;
	line-height: 0.55rem;
	margin-top: 0.25rem;
}
.details-money {
	width: 100%;
	height: 0.85rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.4rem;
}
.details-money-box {
	width: auto;
	height: auto;
}
.details-money-box div:nth-of-type(1) {
	width: 100%;
	height: 0.4rem;
	font-size: 0.3rem;
	line-height: 0.4rem;
	color: #f34831;
}
.details-money-box div:nth-of-type(2) {
	width: 100%;
	height: 0.35rem;
	font-size: 0.25rem;
	line-height: 0.35rem;
}
.details-xiangqing-box {
	width: 100%;
	height: auto;
	padding: 0.3rem 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.details-xiangqing {
	width: 3.4rem;
	height: 0.4rem;
	font-size: 0.3rem;
	line-height: 0.4rem;
	margin-top: 0.3rem;
}
.details-xiangqing label {
	color: #b6babb;
}
.details-xiangqing1 {
	width: 100%;
	height: 0.4rem;
	font-size: 0.3rem;
	line-height: 0.4rem;
	margin-top: 0.3rem;
}
.details-xiangqing1 label {
	color: #b6babb;
}
.right {
	float: right;
}
.right img {
	width: 0.25rem;
	height: 0.25rem;
}
.fangyuanjieshao-box {
	width: 100%;
	height: 3.3rem;
}
/* .ivu-tabs-nav .ivu-tabs-tab {
	font-size: 0.3rem;
	padding: 0 !important;
	margin: 0 0.25rem;
}
.ivu-tabs-ink-bar {
	height: 0;
	left: 0.4rem;
}
.ivu-tabs-bar {
	height: 0.7rem;
	line-height: 0.7rem;
	border: none;
	margin: 0.3rem 0 0 0;
}
.ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
	border-color: #00ae66;
}
.ivu-tabs-nav .ivu-tabs-tab-active {
	height: 0.7rem;
	border-bottom: 4px solid #00ae66 !important;
	color: #000000 !important;
} */
.hxmd-cont {
	width: 100%;
	height: 2.5rem;
	padding: 0.1rem 0.3rem;
	box-sizing: border-box;
	font-size: 0.28rem;
	color: #000000;
}
</style>
